<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <title>食得鲜订单推送管理</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://cdn.bootcss.com/zui/1.6.0/css/zui.min.css">
<script src="//cdn.bootcss.com/zui/1.6.0/js/zui.min.js"></script>
<script src="//cdn.bootcss.com/zui/1.6.0/lib/datetimepicker/datetimepicker.min.js"></script>
<link href="//cdn.bootcss.com/zui/1.6.0/lib/datetimepicker/datetimepicker.min.css" rel="stylesheet">
<div class="container-fluid" style="padding:0">
    <div class="row" style="margin:0">
        <div class="col-md-12 col-sm-12 col-lg-12" style="padding:0;">
            <div class="panel panel-default">
                <div class="panel-heading" style="overflow:hidden;">
                    <div style="float: left" class="btn btn-info">
                        当前由 [ <span style="color: #EA644A">食得鲜员工</span> ] 操作
                        <span style="color: #EA644A"><if condition="$down eq 'complete' ">收货确认</if>
                    <if condition="$down eq 'ing' ">出仓且未送达</if>
                    <if condition="$down eq 'refund' ">全部退款</if>
                        </span> 的订单
                    </div>
                    <div style="float: left;margin-left: 10px;">
                        <form action="" method="post">
                            <input type="text" name="start_date" value="{$start_date}" class="form-control form-date" placeholder="开始日期" style="width: 200px;float: left">
                            <input type="text" name="end_date" value="{$end_date}" class="form-control form-date" placeholder="结束日期" style="width: 200px;float: left">
                            <input type="hidden" name="show" value="{$down}">
                            <input onclick="show_load()" type="submit" class="btn btn-info" value="确定" style="margin-left: 5px;"/>
                        </form>

                    </div>
                    <div style="float: right">
                        <a href="{:U('show_cc',array('show'=>$down,'type'=>'down'))}" style="float: right" class="btn btn-info">下载</a>
                        <a href="{:U('show_cc',array('show'=>$show1))}"
                           style="float: right;margin-right: 10px;" class="btn btn-info"
                           onclick="show_load()">
                            <if condition="$show1 eq 'complete' ">收货确认</if>
                            <if condition="$show1 eq 'ing' ">出仓未送达</if>
                            <if condition="$show1 eq 'refund' ">全部退款</if></a>

                        <a href="{:U('show_cc',array('show'=>$show))}"
                           style="float: right;margin-right: 10px;" class="btn btn-info"
                           onclick="show_load()">
                            <if condition="$show eq 'complete' ">收货确认</if>
                            <if condition="$show eq 'ing' ">出仓未送达</if>
                        <if condition="$show eq 'refund' ">全部退款</if></a>
                    </div>

                </div>
                <div class="panel-body">
                        <table class="table table-hover table-bordered">
                            <tr class="active">
                                <th class="text-center">序号</th>
                                <th class="text-center">条形码</th>
                                <th class="text-center">订单编号</th>
                                <th class="text-center">商品名称</th>
                                <th class="text-center">规格(Kg)</th>
                                <th class="text-center">数量</th>
                                <th class="text-center">姓名</th>
                                <th class="text-center">电话</th>
                                <th class="text-center">区域</th>
                                <th class="text-center">划区</th>
                                <th class="text-center">出仓员</th>
                                <th class="text-center">地址</th>
                                <th class="text-center">标志性建筑</th>
                                <th class="text-center">预期送达时间</th>
                                <if condition="$down eq 'complete' ">
                                    <th class="text-center">迟到送达时间(小时)</th>
                                    <else/>
                                        <th class="text-center">还剩余时间（小时）</th>
                                </if>
                                <th class="text-center">状态</th>
                                <th class="text-center">订单备注</th>
                            </tr>
                            <volist name="order_info" id="vo" key="key">
                            <tr class="show_win" order_sn="{$vo.order_sn}">
                                <td class="text-center">{$key}</td>
                                <td class="text-center" style="width: 208px;"><img src="http://w.shidexian.com/buildcode.php?codebar=BCGcode39&text={$vo.order_id}"/></td>
                                <td class="text-center">{$vo.order_sn}</td>
                                <td class="text-center">{$vo.goods_name}</td>
                                <td class="text-center">{$vo.goods_weight}</td>
                                <td class="text-center">{$vo.goods_num}</td>
                                <td class="text-center">{$vo.consignee}</td>
                                <td class="text-center">{$vo.mobile}</td>
                                <td class="text-center">{$vo.name}</td>
                                <td class="text-center">{$vo.zcname}</td>
                                <td class="text-center">{$vo.otw}</td>
                                <td class="text-center">{$vo.address}</td>
                                <td class="text-center">{$vo.sign_building}</td>
                                <td class="text-center">{$vo.best_time_start}-{$vo.best_time}</td>
                                <td class="text-center">{$vo.delayed_time}</td>
                                <td class="text-center">
                                    <if condition="$vo['shipping_status'] eq 5 ">发货中</if>
                                    <if condition="$vo['shipping_status'] eq 1 ">已发货</if>
                                    <if condition="$vo['shipping_status'] eq 2 ">收货确认</if>
                                </td>
                                <td class="text-center">{$vo.postscript}</td>
                            </tr>
                            </volist>
                        </table>
                </div>
                <div class="panel-footer" style="overflow: hidden">
                    <a target="_blank" href="http://www.shidexian.com" class="btn" style="float: right">食得鲜@广州优果蔬网络科技有限公司</a>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal2" style="">
    <div class="modal-dialog">
        <div id="loading">
            <div id="loading-center">
                <div id="loading-center-absolute">
                    <div class="object" id="object_one"></div>
                    <div class="object" id="object_two"></div>
                    <div class="object" id="object_three"></div>
                    <div class="object" id="object_four"></div>
                </div>
            </div>
        </div>
    </div>
</div>


<div class="panel detail-frame  panel-primary" style="position: fixed;top: 40px;background: #DDF3F5;display: none;">
    <div class="panel-heading">
        订单操作记录
    </div>
    <div class="panel-body">
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>操作者</th>
                <th>订单状态</th>
                <th>配送状态</th>
                <th>付款状态</th>
                <th>操作备注</th>
                <th>操作时间</th>
            </tr>
            </thead>
            <tbody id="show_title">
            </tfoot>
        </table>
    </div>
</div>



<style>
    #loading{
        background-color: #2c3e50;
        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 1;
        margin-top: 0px;
        top: 0px;
    }
    #loading-center{
        width: 100%;
        height: 100%;
        position: relative;
    }
    #loading-center-absolute {
        position: absolute;
        left: 50%;
        top: 50%;
        height: 50px;
        width: 50px;
        margin-top: -25px;
        margin-left: -25px;
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-animation: loading-center-absolute 1.5s infinite;
        animation: loading-center-absolute 1.5s infinite;

    }
    .object{
        width: 25px;
        height: 25px;
        background-color: #FFF;
        float: left;

    }




    #object_one {
        -webkit-animation: object_one 1.5s infinite;
        animation: object_one 1.5s infinite;
    }
    #object_two {
        -webkit-animation: object_two 1.5s infinite;
        animation: object_two 1.5s infinite;
    }
    #object_three {
        -webkit-animation: object_three 1.5s infinite;
        animation: object_three 1.5s infinite;
    }
    #object_four {
        -webkit-animation: object_four 1.5s infinite;
        animation: object_four 1.5s infinite;
    }


    @-webkit-keyframes loading-center-absolute {
        100% { -webkit-transform: rotate(-45deg); }

    }

    @keyframes loading-center-absolute {
        100% {
            transform:  rotate(-45deg);
            -webkit-transform:  rotate(-45deg);
        }
    }



    @-webkit-keyframes object_one {
        25% { -webkit-transform: translate(0,-50px) rotate(-180deg); }
        100% { -webkit-transform: translate(0,0) rotate(-180deg); }

    }

    @keyframes object_one {
        25% {
            transform: translate(0,-50px) rotate(-180deg);
            -webkit-transform: translate(0,-50px) rotate(-180deg);
        }
        100% {
            transform: translate(0,0) rotate(-180deg);
            -webkit-transform: translate(0,0) rotate(-180deg);
        }
    }


    @-webkit-keyframes object_two {
        25% { -webkit-transform: translate(50px,0) rotate(-180deg); }
        100% { -webkit-transform: translate(0,0) rotate(-180deg); }
    }

    @keyframes object_two {
        25% {
            transform: translate(50px,0) rotate(-180deg);
            -webkit-transform: translate(50px,0) rotate(-180deg);
        }
        100% {
            transform: translate(0,0) rotate(-180deg);
            -webkit-transform: translate(0,0) rotate(-180deg);
        }
    }

    @-webkit-keyframes object_three {
        25% { -webkit-transform: translate(-50px,0) rotate(-180deg); }
        100% { -webkit-transform: translate(0,0) rotate(-180deg); }
    }

    @keyframes object_three {
        25% {
            transform:  translate(-50px,0) rotate(-180deg);
            -webkit-transform:  translate(-50px,0) rotate(-180deg);
        }
        100% {
            transform: translate(0,0) rotate(-180deg);
            -webkit-transform: rtranslate(0,0) rotate(-180deg);
        }
    }


    @-webkit-keyframes object_four {
        25% { -webkit-transform: translate(0,50px) rotate(-180deg); }
        100% { -webkit-transform: translate(0,0) rotate(-180deg); }
    }

    @keyframes object_four {
        25% {
            transform: translate(0,50px) rotate(-180deg);
            -webkit-transform: translate(0,50px) rotate(-180deg);
        }
        100% {
            transform: translate(0,0) rotate(-180deg);
            -webkit-transform: translate(0,0) rotate(-180deg);
        }
    }


</style>
<script>
    // 仅选择日期
    $(".form-date").datetimepicker(
        {
            language:  "zh-CN",
            weekStart: 1,
            todayBtn:  1,
            autoclose: 1,
            todayHighlight: 1,
            startView: 2,
            minView: 2,
            forceParse: 0,
            format: "yyyy-mm-dd"
        });



    function show_load() {
        $('#myModal2').modal('show');//显示加载中
    }

    $(function () {

        //hover某处显示悬浮框
        $(".show_win").mouseover(function(e){
            //获取鼠标位置函数
            var order_sn = $(this).attr("order_sn");
            cacheTime.fire(order_sn);
            var mousePos = mousePosition(e);
            var  xOffset = 20;
            var  yOffset = 25;
            $(".detail-frame").css("display","block").css("position","absolute").css("top",(mousePos.y - yOffset) + "px").css("left",(mousePos.x + xOffset) + "px");
            cacheTime.fire(order_sn);

        });
        //鼠标离开表格隐藏悬浮框
        $(".show_win").mouseout(function(){
            $(".detail-frame").hide();
        });

    });



    var cacheTime={
        time:null,
        fn:function(order_sn){
            //alert(order_sn);
            get_action_data(order_sn);   //查询数据处理
        },
        fire:function(order_sn){
            clearTimeout(this.time);
            this.time=setTimeout(function(){
                cacheTime.fn(order_sn);
            },300);
        }
    }



    function mousePosition(ev){
        ev = ev || window.event;
        if(ev.pageX || ev.pageY){
            return {x:ev.pageX, y:ev.pageY};
        }
        return {
            x:ev.clientX + document.body.scrollLeft - document.body.clientLeft,
            y:ev.clientY + document.body.scrollTop - document.body.clientTop
        };
    }

    function get_action_data(order_sn) {

        var url = "{:U('notify_select')}"+"?order_sn="+order_sn;
        var url = "index.php?s=/Exposed/notify_select/order_sn/"+order_sn+".html";
        var xmlhttp;
        xmlhttp=new XMLHttpRequest();

        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                //console.log(xmlhttp.responseText);
                var obj = JSON.parse(xmlhttp.responseText);


                var html = "";
                $.each(obj.order_action, function(name, value) {
                    html +="<tr ><td>"+value.action_user+"</td> <td>"+value.order_status+"</td> <td>"+value.shipping_status+"</td> <td>"+value.pay_status+"</td> <td>"+value.action_note+"</td> <td>"+value.log_time+"</td> </tr>";
                });


                //html +="<td style='color:#ff0000;width: 100%;display: block;overflow: hidden;border-bottom: #dedede 1px solid;margin-top: 5px;font-weight: bold'><div class='lan' style='width: 15%'>"+obj.username+"</div><div class='lan' style='width: 15%'>"+obj.userphone+"</div><div class='lan' style='width: 45%'>"+obj.address+"</div><div class='lan' style='width: 25%'>"+obj.best_time_2+"</div></td><div>";


                $("#show_title").html(html);

                console.log(html);
                //document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET",url,true);
        xmlhttp.send();
    }
</script>